<template>
    <div style="height:600px;width:800px">


    <el-row>
        <el-col :span="12">
            编号:{{music.id}}
        </el-col>
        <el-col :span="12">
            名称: {{music.name}}


        </el-col>
    </el-row>

    <el-row>
        <el-col :span="12">
            歌手的名字:{{music.artistsname}}
        </el-col>
        <el-col :span="12">
            类别名称：{{music.type.tname}}

        </el-col>
    </el-row>

    <el-row>
        <el-col :span="12">
            专辑图片:   <el-image :src="music.picurl"/>
        </el-col>
        <el-col :span="12">
            音乐:   	<audio controls :src="music.url" />

        </el-col>
    </el-row>
</div>
</template>
<style scoped>
.el-row {
    height: 60px;


}
</style>


<script setup>

import { ref } from 'vue'

//定义响应式变量
const music = ref({
    id: '',
    name: '',
    artistsname: '',
    url: '',
    picurl: '',
    typeId:'',
    type:{
       
        
    }

});


/**
 * 根据编号查询歌曲信息
 */
const queryById = (id) => {

    fetch(`http://localhost:3000/musics/${id}?_embed=type`)
        .then(res => res.json()).then((result) => {
            music.value = result;
        })


}

defineExpose({ queryById })




</script>